<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue3-escook</title>
  <link rel="stylesheet" href="./lib/style.css">
  <script type="importmap">
    {
      "imports" : {
        "vue": "./lib/vue-3.4.29.js"
      }
    }
  </script>
  <script type="module">
    import { createApp, ref } from 'vue'

    const app = createApp({
      setup() {
        const msg = ref('123')
        const content = ref('你好，彬哥')
        const state1 = ref(false)
        const state2 = ref('no')
        const hobby = ref([])
        const gender = ref('')
        const degree = ref('')
        const fruits = ref([])

        const onInputChange = (e) => {
          msg.value = e.target.value
        }

        return {
          msg,
          onInputChange,
          content,
          state1,
          state2,
          hobby,
          gender,
          degree,
          fruits
        }
      }
    })

    app.mount('#app')
  </script>
</head>

<body>
  <div id="app">
    <!-- 属性绑定是单向的数据同步 -->
    <!-- <input type="text" :value="msg" @change="onInputChange"> -->
    <!-- v-model 是双向数据绑定指令，它只能配合表单元素一起使用 -->
    <!-- 不能配合普通元素使用 -->
    <input type="text" v-model="msg">
    <hr>
    <textarea v-model="content"></textarea>
    <hr>
    <p>单个复选框的 v-model 绑定</p>
    <!-- 如果 v-model 仅和一个复选框进行了绑定，此时， -->
    <!-- 绑定的值是布尔值 true 或 false -->
    <input type="checkbox" id="cb1" v-model="state1">
    <label for="cb1">复选框1</label>
    <hr>

    <p>单个复选框的值绑定</p>
    <input type="checkbox" id="cb2" v-model="state2" false-value="no" true-value="yes">
    <label for="cb2">复选框2</label>

    <hr>
    <p>多个复选框的值：{{ hobby }}</p>
    <label>
      <input type="checkbox" v-model="hobby" value="吃饭">吃饭
    </label>
    <label>
      <input type="checkbox" v-model="hobby" value="睡觉">睡觉
    </label>
    <label>
      <input type="checkbox" v-model="hobby" value="打豆豆">打豆豆
    </label>

    <hr>
    <p>性别是：{{ gender }}</p>
    <label>
      <input type="radio" v-model="gender" value="男">男
    </label>
    <label>
      <input type="radio" v-model="gender" value="女">女
    </label>
    <label>
      <input type="radio" v-model="gender" value="保密">保密
    </label>

    <hr>
    <p>学历是：{{ degree }}</p>
    <select v-model="degree">
      <option value="" disabled>请选择</option>
      <option>博士</option>
      <option>硕士</option>
      <option>学士</option>
    </select>

    <hr>
    <p>喜欢的水果：{{ fruits }}</p>
    <select multiple v-model="fruits">
      <option value="a">榴莲</option>
      <option value="b">释迦</option>
      <option value="c">芒果</option>
    </select>
  </div>
</body>

</html>